{% stylesheet %}
.four_image_content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 30px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .four_image_content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-gap: 15px;
  }
}

.four_image_content .image-item {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  height: calc(calc(var(--imageWidth) - 60px) / 3) !important;
}

.four_image_content .image-item img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
}

.four_image_content .image-item:nth-child(3) {
  height: calc(calc(var(--imageWidth) - 60px) / 3 * 2  + 30px) !important;
  grid-row: span 2 / span 2;
}

.four_image_content .image-item:nth-child(4) {
  grid-column: span 2 / span 2;
}

.four_image_content .image-item:hover .four-image-item-mask {
  opacity: 1;
}

.four_image_content .image-item .four-image-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity .8s;
}

.four_image_content .image-item .four-image-item-mask .four-image-item-btn {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  font-family: Montserrat;
  font-weight: 400;
  padding: 12px 40px;
  border: 1px solid #fff;
  word-break: break-word;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .four_image_content .image-item {
    height: calc(calc(100vw - 120px) / 3) !important;
  }
  .four_image_content .image-item:nth-child(3) {
    height: calc(calc(100vw - 120px) / 3 * 2 + 30px) !important;
    grid-row: span 2 / span 2;
  }
}

@media screen and (max-width: 767px) {
  .four_image_content .image-item {
    height: calc(calc(100vw - 15px * 3) / 2) !important;
  }
  .four_image_content .image-item:nth-child(1) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .four_image_content .image-item:nth-child(2) {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .four_image_content .image-item:nth-child(3) {
    height: calc(calc(100vw - 15px * 2)) !important;
    grid-column: 1/2;
    grid-row: 1/3;
  }
}

.four_image_content .default_image_number {
  font-size: 18px;
  color: #999;
  position: absolute;
  right: 20px;
  bottom: 14px;
}

{% endstylesheet %}
<div class="container-wrapper block_padding">
    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        <h2>{{ section.settings.title }}</h2>
        {% if section.settings.detail != "" %}
        <div class="block_title-detail">{{ section.settings.detail }}</div>
        {% endif %}
    </div>
    {% endif %}
    <div class="four_image_content {{ section.settings.layout }}" style="--imageWidth: {% if section.settings.is_width_fill %}var(100vw - 100px){% else %}1200px{% endif %}">
        <a class="image-item animation-move-left" href="{% if section.settings.image_one_link.url %}{{ section.settings.image_one_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接">
            {% if section.settings.image_one.src != "" %}
            <img data-src="{{ section.settings.image_one.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_one.alt }}" />
            {% else %} {% include "default_block", width:'100%',height : "100%"%}
            <span class="default_image_number">Image-1</span>
            {% endif %}

            <div class="four-image-item-mask">
              <div class="four-image-item-btn">{{section.settings.one_btn_text}}</div>
            </div>
        </a>
        <a class="image-item animation-move-right" href="{% if section.settings.image_two_link.url %}{{ section.settings.image_two_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接">
            {% if section.settings.image_two.src != "" %}
            <img data-src="{{ section.settings.image_two.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_two.alt }}" />
            {% else %} {% include "default_block" , width:'100%',height : '100%' %}
            <span class="default_image_number">Image-2</span>
            {% endif %}
            <div class="four-image-item-mask">
              <div class="four-image-item-btn">{{section.settings.two_btn_text}}</div>
            </div>
        </a>
        <a class="image-item" href="{% if section.settings.image_three_link.url %}{{ section.settings.image_three_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接">
            {% if section.settings.image_three.src != "" %}
            <img data-src="{{ section.settings.image_three.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_three.alt }}" />
            {% else %} {% include "default_block" , width:'100%',height : '100%' %}
            <span class="default_image_number">Image-3</span>
            {% endif %}
            <div class="four-image-item-mask">
              <div class="four-image-item-btn">{{section.settings.three_btn_text}}</div>
            </div>
        </a>

        <a class="image-item" href="{% if section.settings.image_four_link.url %}{{ section.settings.image_four_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接">
            {% if section.settings.image_four.src != "" %}
            <img data-src="{{ section.settings.image_four.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_four.alt }}" />
            {% else %} {% include "default_block" , width:'100%',height : '100%'  %}
            <span class="default_image_number">Image-4</span>
            {% endif %}
            <div class="four-image-item-mask">
              <div class="four-image-item-btn">{{section.settings.four_btn_text}}</div>
            </div>
        </a>
    </div>
</div>

{% schema %}
{
	"tag": "",
	"class": "block_image4",
	"icon": "icon-duotu4",
	"is_global": false,
	"name": {
		"zh_CN": "多图4"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片1"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高800*1664px，固定当前尺寸比例"
			},
			"id": "image_one"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_one_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字"
			},
			"id": "one_btn_text"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片2"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高比例为1:1，宽度800px以上"
			},
			"id": "image_two"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_two_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字"
			},
			"id": "two_btn_text"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片3"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高比例为1:1，宽度800px以上"
			},
			"id": "image_three"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_three_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字"
			},
			"id": "three_btn_text"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片4"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽高1664*800px，固定当前尺寸比例"
			},
			"id": "image_four"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_four_link"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字"
			},
			"id": "four_btn_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Figure 4",
			"layout": "horizontal_left",
			"detail": "",
			"one_btn_text": "TEST",
			"two_btn_text": "TEST",
			"three_btn_text": "TEST",
			"four_btn_text": "TEST",
			"image_one": {
				"src": "",
				"alt": ""
			},
			"image_one_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"image_two": {
				"src": "",
				"alt": ""
			},
			"image_two_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"image_three": {
				"src": "",
				"alt": ""
			},
			"image_three_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"image_four": {
				"src": "",
				"alt": ""
			},
			"image_four_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"grid_gap": "30"
		},
		"blocks": []
	}
}
{% endschema %}